<script setup lang="tsx">
import { MessagePlugin } from 'tdesign-vue-next';
import { get_auth_list } from '~/utils/api';
import { useLoading } from '~/store/manager/loading';

definePageMeta({
    layout: 'manager'
})

// store
const loadingStore = useLoading();

// 表格数据列
const tableData = ref([]);
// 表格数据
const tableDataColumns = ref([
    { colKey: 'auth_id', title: '权限ID' },
    { colKey: 'title', title: '权限名称' },
    {
        colKey: 'is_hidden',
        title: '隐藏权限',
        cell: (h, { row }) => (
            <div class="is_hidden">
                <t-tag shape="round" theme={row.is_hidden === 0 ? "success" : "warning"} variant="light-outline">{row.is_hidden === 0 ? "显示菜单" : "隐藏菜单"}</t-tag>
            </div>
        )
    },
    {
        colKey: 'operate',
        title: '操作',
        width: 340,
        cell: (h: any, { row }) => (
            <div class="table-operate">
                <t-space direction="vertical"></t-space>
                <t-space>
                    <t-button theme="primary" shape="square" size="small" variant="base" onClick={() => {
                        // 设置表单类型为新增
                        createForm.value = true;
                        // 设置表单默认值为当前选中
                        formData.content.pid = row.auth_id;
                        // 显示编辑框
                        showForm.value = true;
                    }} ><t-icon name="add" /></t-button>
                    <t-button theme="success" shape="square" size="small" variant="base" onClick={() => {
                        // 设置表单类型为编辑
                        createForm.value = false;
                        // 设置表单数据为当前选中
                        formData.content = { ...row };
                        // 显示表单
                        showForm.value = true;
                    }}><t-icon name="edit" /></t-button>
                    <t-popconfirm content="确认删除吗" onConfirm={() => onDeleteConfirm(row)}>
                        <t-button theme="danger" shape="square" size="small" variant="base"><t-icon name="delete" /></t-button>
                    </t-popconfirm>
                </t-space>
            </div>
        )
    }
]);

// 确认删除
const onDeleteConfirm = (row: any) => {
    delete_auth({ auth_id: row.auth_id }).then((res: any) => {
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            })
            // 刷新当前页面
            __initialize();
            return;
        }
    }).catch((err) => {
        console.log(err);
    })
}

// 表格ref
const tableRef = ref(null);

// 显示/隐藏表单
const showForm = ref(false);

// 点击新增按钮
const showFormHandle = () => {
    // 设置当前操作flag为新增
    createForm.value = true;
    formData.content.flag = 'create';
    // 显示权限菜单
    showForm.value = true;
}

// 点击取消按钮
const onCancel = () => {
    showForm.value = false;
    resetForm();
}

// esc键按下时间
const onEscKeydown = () => {
    showForm.value = false;
    resetForm();
}

// 关闭按钮点击事件
const onCloseBtnClick = () => {
    showForm.value = false;
    resetForm();
}

// 关闭事件
const close = () => {
    showForm.value = false;
    resetForm();
}

// 表单数据
let formData = reactive({
    content: {
        flag: 'create',
        pid: 0,
        title: '',
        type: 'button',
        controller: '',
        action: '',
        icon: '',
        router: '',
        is_hidden: 1,
        auth_id: 0
    }
});

// 重置表单数据
const resetForm = () => {
    // 重置表单数据
    let tmpData = {
        flag: 'create',
        pid: 0,
        title: '',
        type: 'button',
        controller: '',
        action: '',
        icon: '',
        router: '',
        is_hidden: 1,
        auth_id: 0
    };

    formData.content = tmpData;
}


// 点击确认按钮事件
const onConfirmAnother = () => {

    // 判断当前操作
    if (createForm.value) {
        // 新增
        formData.content.flag = 'create';
    } else {
        // 编辑
        formData.content.flag = 'update';
    }
    create_auth(formData.content).then((res: any) => {
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            });

            // 重置表单
            resetForm();

            // 隐藏表单
            showForm.value = false;

            // 刷新当前页面
            __initialize();
        }
    }).catch((err) => {
        console.log(err);
    })

}


// 表单类型
const createForm = ref(true);

// 选择权限树列表
const selectAuthTreeList = ref([]);

// 选择权限树表单显示字段
const selectAuthTreeKeys = {
    value: 'auth_id',
    label: 'title',
    children: 'children'
}

// 表单标题
const formTitle = ref('新增');

// 计算属性
watch(createForm, (value, oldValue) => {
    if (value) {
        formTitle.value = '新增';
    } else {
        formTitle.value = '编辑';
    }
})

// 页面初始化方法
const __initialize = () => {
    // 获取权限菜单树
    get_auth_list({ flag: 'table' }).then((res: any) => {
        if (res.success) {
            console.log('success');

            // 设置表格数据
            tableData.value = res.data
            // 追加顶级分类给可选择权限菜单列表使用
            const headerAuth = { auth_id: 0, title: '顶级权限', pid: 0 };
            let tmpList = res.data.concat();
            tmpList.unshift(headerAuth);
            selectAuthTreeList.value = tmpList;
        }
    }).catch((err) => {
        console.log(err);
    })

}

onMounted(() => {
    console.log('开始执行onMounted');

    __initialize();
})



</script>
<template>
    <div class="table-container">
        <div class="toolbar mb-[30px]">
            <t-card>
                <t-row>
                    <t-col :span="3">
                        <div class="add-button">
                            <t-button theme="primary" @click="showFormHandle">
                                <template #icon><t-icon name="add" /></template>
                                新建
                            </t-button>
                        </div>
                    </t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                </t-row>
            </t-card>
        </div>
        <!-- !! 也可以使用具名插槽 `expandedRow` 自定义展开行内容 !! -->
        <t-card>
            <t-enhanced-table ref="tableRef" rowKey="auth_id" :data="tableData" :columns="tableDataColumns" :loading="loadingStore.getTableLoading"
                :tree="{ indent: 24, childrenKey: 'children', defaultExpandAll: false, treeNodeColumnIndex: 0 }"></t-enhanced-table>
        </t-card>
        <client-only>
            <div class="form-box">
                <t-dialog v-model:visible="showForm" :header="formTitle" width="40%" :confirm-on-enter="true"
                    :on-cancel="onCancel" :closeOnOverlayClick="false" :on-esc-keydown="onEscKeydown"
                    :on-close-btn-click="onCloseBtnClick" :on-close="close" :on-confirm="onConfirmAnother">
                    <t-space direction="vertical" style="width: 100%">
                        <div>
                            <t-form ref="form" :data="formData" :colon="true">

                                <t-form-item label="上级权限" name="pid">
                                    <t-tree-select :data="selectAuthTreeList" :keys="selectAuthTreeKeys"
                                        v-model="formData.content.pid">
                                    </t-tree-select>
                                </t-form-item>

                                <t-form-item label="权限名称" name="title">
                                    <t-input v-model="formData.content.title" placeholder="请输入权限名称"></t-input>
                                </t-form-item>

                                <t-form-item label="权限类型" name="type">
                                    <t-select v-model="formData.content.type">
                                        <t-option key="0" label="目录型" :value="'dir'" />
                                        <t-option key="1" label="列表型" :value="'list'" />
                                        <t-option key="2" label="按钮型" :value="'button'" />
                                    </t-select>
                                </t-form-item>

                                <t-form-item label="控制器" name="controller">
                                    <t-input v-model="formData.content.controller" placeholder="请输入权限对应控制器"></t-input>
                                </t-form-item>

                                <t-form-item label="方法" name="action">
                                    <t-input v-model="formData.content.action" placeholder="请输入权限对应方法"></t-input>
                                </t-form-item>

                                <t-form-item label="权限图标" name="icon">
                                    <t-input v-model="formData.content.icon" placeholder="请输入权限图标"></t-input>
                                </t-form-item>

                                <t-form-item label="前端路由" name="router">
                                    <t-input v-model="formData.content.router" placeholder="请输入权限对应前端路由"></t-input>
                                </t-form-item>

                                <t-form-item label="隐藏权限" name="is_hidden">
                                    <t-select v-model="formData.content.is_hidden">
                                        <t-option key="0" label="显示权限" :value="0" />
                                        <t-option key="1" label="隐藏权限" :value="1" />
                                    </t-select>
                                </t-form-item>
                            </t-form>
                        </div>
                    </t-space>
                </t-dialog>
            </div>
        </client-only>
    </div>
</template>
<style></style>